import { ActionType, ProCard } from '@ant-design/pro-components';
import { Segmented, Tabs } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { useAccess } from 'umi';

import { getCountyAnalysis } from '@/services/api/api-county';
import TableActive from '../TableCounty/TableActive';
import TableSubmit from '../TableCounty/TableSubmit';
import TableTopic from '../TableCounty/TableTopic';
import './PageContainerAggregationCounty.less';

const PageContainerAggregationCounty: React.FC = (props) => {
  const access = useAccess();
  const [tab, setTab] = useState('tab2');
  const [countyKey, setCountyKey] = useState('1');
  const items = [
    {
      label: '区县列表',
      key: 'grp',
      type: 'group',
      children: [
        { label: '高新区', key: '1' },
        { label: '璧山区', key: '2' },
        { label: '綦江区', key: '3' },
      ],
    },
  ];
  const [visible, setVisibleState] = useState<string>('table');
  const [totalData, setTotalDataState] = useState<CountyData.Analysis>();
  const [loading, setLoadingState] = useState(true);
  const [responsive, setResponsive] = useState(false);

  const [visibleData, setVisibleDataState] = useState();

  const onDetails = (id: string, name: string) => {
    setVisibleState('details');
    setVisibleDataState({ id, name });
  };
  const actionRef = useRef<ActionType>();

  const loadAnalysisData = async () => {
    try {
      const response = await getCountyAnalysis({ countyKey: countyKey });
      if (response.code === 0) {
        console.log(response.data);
        setTotalDataState(response.data);
      }
      setLoadingState(false);
    } catch (error) {
      console.log(error);
      setLoadingState(false);
    }
  };
  useEffect(() => {
    loadAnalysisData();
  }, []);

  return (
    <div>
      <Segmented
        size="large"
        options={[
          { label: '高新区', value: '1', disabled: false },
          { label: '璧山区', value: '2', disabled: false },
          { label: '綦江区', value: '3', disabled: true },
        ]}
        onChange={(value) => {
          setLoadingState(true);
          setCountyKey(value);
          loadAnalysisData();
          loadAnalysisData();
        }}
      />
      {/* <Spin spinning={loading} size="large">
          <ProCard
            headerBordered={false}
            bordered={false}
            direction={responsive ? 'column' : 'row'}
          >
            <ProCard
              headerBordered={false}
              bordered={false}
              className={style.topic}
              split={responsive ? 'horizontal' : 'vertical'}
              style={{ padding: '10px 40px', width: '95%' }}
            >
              <h3>选题计划</h3>
              <h2 style={{ color: '#467BE3' }}>{totalData?.countTopic} </h2>
            </ProCard>
            <ProCard
              bordered={false}
              className={style.submit}
              split={responsive ? 'horizontal' : 'vertical'}
              style={{ padding: '10px 40px', width: '95%' }}
            >
              <h3>报送资源</h3>
              <h2 style={{ color: '#467BE3' }}>{totalData?.countSubmit}</h2>
            </ProCard>
            <ProCard
              bordered={false}
              className={style.active}
              split={responsive ? 'horizontal' : 'vertical'}
              style={{ padding: '10px 40px', width: '95%' }}
            >
              <h3>主动报送</h3>
              <h2 style={{ color: '#467BE3' }}>{totalData?.countActive}</h2>
            </ProCard>
          </ProCard>
        </Spin> */}
      {/* <ProCard
        tabs={{
          tabPosition: 'top',
          activeKey: tab,

          children: [
            {
              label: `选题计划`,
              key: 'tab1',
              children: <TableTopic onDetails={onDetails} countyKey={countyKey}></TableTopic>,
            },
            {
              label: `报送资源`,
              key: 'tab2',
              children: <TableSubmit onDetails={onDetails} countyKey={countyKey}></TableSubmit>,
            },
            {
              label: `主动报送`,
              key: 'tab3',
              children: <TableActive countyKey={countyKey} actionRef={actionRef}></TableActive>,
            },
          ],
          onChange: (key) => {
            setTab(key);
          },
        }}
      /> */}
      <Tabs activeKey={tab} onChange={setTab} >
        <Tabs.TabPane tab="选题计划" key="tab1">
          <TableTopic onDetails={onDetails} countyKey={countyKey}></TableTopic>
        </Tabs.TabPane>
        <Tabs.TabPane tab="报送资源" key="tab2">
          <TableSubmit onDetails={onDetails} countyKey={countyKey}></TableSubmit>
        </Tabs.TabPane>
        <Tabs.TabPane tab="主动报送" key="tab3">
          <TableActive countyKey={countyKey} actionRef={actionRef}></TableActive>
        </Tabs.TabPane>
      </Tabs>
      {/* </PageContainer> */}
    </div>
  );
};

export default PageContainerAggregationCounty;
